<template>
	<view class="safe-area-inset-bottom">
		<view class="swip_header" v-if="$store.getters.staffInfo.companyId != 0 && loginType == 3">
			<view class="slot-box">
				<view style="width: 100%;">
					<uni-search-bar v-model="queryParams.params.findApi" v-if="tabIndex == 0" type="text" @confirm="handleQuery" @input="handleQuery" placeholder="请输入客户姓名" />
					<uni-search-bar v-model="queryParams.name" v-else type="text" @confirm="handleQuery" @input="handleQuery" placeholder="请输入角色名称" />
				</view>
			</view>
		</view>
		<view class="swip_header" v-else>
			<view class="swiplist">
				<swiperTabHead :tabBars="tabList" :tabIndex="tabIndex" @tabtap="tabtap"></swiperTabHead>
				<!-- <button size="mini" class="add_btn" @click="handleAdd"><i class="iconfont" style="color: #00a660;">&#xeaf3;</i>新增</span></button> -->
			</view>
			<view class="slot-box">
				<view style="width: 100%;">
					<uni-search-bar v-model="queryParams.params.findApi" v-if="tabIndex == 0" type="text" @confirm="handleQuery" @input="handleQuery" placeholder="请输入客户姓名" />
					<uni-search-bar v-model="queryParams.name" v-else type="text" @confirm="handleQuery" @input="handleQuery" placeholder="请输入角色名称" />
				</view>
			</view>
		</view>
		
		<!-- 新增管理弹窗 -->
		<!-- <uni-popup ref="addPopup" background-color="#fff">
			<view class="popup-content">
				<view class="bor_add" @click="addList(0)"><i class="iconfont">&#xe647;</i><span>新增员工</span></view>
				<view class="bor_add" @click="addList(1)" v-if="tabIndex == 0"><i class="iconfont">&#xe647;</i><span>新员工申请</span></view>
				<view class="bor_add" @click="addList(2)" v-if="tabIndex == 0"><i class="iconfont">&#xe647;</i><span>添加子部门</span></view>
			</view>
		</uni-popup> --> 
		
		<view :class="($store.getters.staffInfo.companyId != 0 && loginType == 3)?'listSearchTop':'listSwiperTop'">
		<!-- 人员管理 -->
		<personnel-management v-if="tabIndex == 0" ref="person" :findApi="queryParams.params.findApi"/>
		<!-- 部门管理 -->
		<!-- <department-management v-if="tabIndex == 1" ref="department" :findApi="queryParams.params.findApi" class="departTop"/> -->
		<!-- 角色权限 -->
		<company-role v-if="tabIndex == 1" ref="role" :findApi="queryParams.name"/>
		</view>
	</view>
</template>

<script>
	import swiperTabHead from "@/components/slideTab/slideTab"
	import personnelManagement from "./personnelManage/personnelManagement"
	import departmentManagement from "./departmentManage/departmentManagement"
	import companyRole from "./role/companyRole"
	export default {
		components: {
			swiperTabHead,personnelManagement,companyRole,departmentManagement
		},
		data() {
			return {
				loginType:'',
				// 查询参数
				queryParams: {
				  pageNum: 1,
				  pageSize: 10,
				  deptId: null,
				  roleId: null,
				  isCertify: null,
				  params: {
				    findApi: undefined
				  }
				},
				tabList: [{
					title: '人员管理'
				}, {
					title: '角色权限'
				}],
				tabIndex: 0,
			}
		},
		onLoad(option) {
			if(option){
				this.loginType = option.loginType
				console.log(this.loginType)
			}
			uni.$on('refreshData',() => {
				this.$refs.person.getList()
			})
		},
		onReachBottom() {
			if(this.tabIndex == 0){
				this.$refs.person.loadMore()
			}else if(this.tabIndex == 1){
				this.$refs.role.loadMore()
			}
		},
		methods: {
			/** 搜索 */
			handleQuery(){
				this.$nextTick(()=>{
					if(this.tabIndex == 0){
						this.$refs.person.getList(true)
					}else if(this.tabIndex == 1){
						this.$refs.role.getList(true)
					}
				})
			},
			/** 新增 */
			addList(e){
				if(e == 0){
					// 新增员工 
					uni.navigateTo({
						url:'./personnelManage/newMember'
					})
				}else if(e == 1){
					// 新员工申请
					uni.navigateTo({
						url:'./applyTojoin'
					})
				}else{
					// 添加子部门
					uni.navigateTo({
						url:'./departmentManage/addDepartment'
					})
				}
				this.$refs.addPopup.close()
			},
			/** 接受子组件传过来的值点击切换导航 */
			tabtap(index) {
				var _this = this
				_this.tabIndex = index;
			},
			/** 新增管理弹窗 */
			handleAdd(){
				// this.$refs.addPopup.open('center')
				if(this.tabIndex == 0){
					uni.navigateTo({
						url:'./personnelManage/newMember'
					})
				}else{
					this.$refs.role.handleUpdate()
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	::v-deep .uni-popup .uni-popup__wrapper{width: 90% !important;padding:30rpx 0;}
	::v-deep .uni-popup-dialog{width: 100%;}
	.bor_add{
		 border: 1rpx dashed #ccc;
		 text-align: center;
		 width: 300rpx;
		 height: 120rpx;
		 line-height: 120rpx;
		 margin:40rpx auto;
		 border-radius:20rpx;
		 color: $uni-color-primary;
		 span{margin-left: 5rpx;}
	}
		
</style>
